/**
 * 组件名称：IpdShellApp
 * 使用场景：Ipd划分了左右布局，左侧是nav，右侧是content。同级目录下，content也有自己的布局，详见IpdShellContent
 * 功能介绍：标题、英文、导航按钮
 * 功能进度：100%
 * 待办事项：无
 */

"use client";

import {
  IconCube,
  IconListDetails,
  IconTopologyComplex,
  IconSettings,
  IconInfoCircle,
  IconCloud,
} from "@tabler/icons-react";
import {WideIpdSideMenu} from "./wide/WideIpdSideMenu";
import {Box, Flex, ScrollArea, ScrollAreaAutosize} from "@mantine/core";
import {NarrowIpdSideMenu} from "./narrow/NarrowIpdSideMenu";

const menuTop = [
  {link: "projects", label: "工程项目", icon: IconCube},
  {link: "tasks", label: "待办事项", icon: IconListDetails},
  {link: "digital-twin", label: "数字孪生", icon: IconTopologyComplex},
  {link: "cloud-docs", label: "云端文档", icon: IconCloud},
];

const menuBottom = [
  {link: "settings", label: "系统设置", icon: IconSettings, requireAdmin: true},
  {link: "about-us", label: "关于平台", icon: IconInfoCircle},
];

const menuTools = [
  {
    label: "流量预测",
    link: "traffic-forcast",
    image: {alt: "Traffic Forcast", src: "/IpShowTools/ShowForcast.png"},
  },
  {
    label: "中继仿真",
    link: "relay-simulation",
    image: {alt: "Relay Simulation", src: "/IpShowTools/ShowLink.png"},
  },
  {
    label: "设备配置",
    link: "device-config",
    image: {alt: "Device Config", src: "/IpShowTools/ShowDevice.png"},
  },
  {
    label: "面板分配",
    link: "pannel-assignment",
    image: {alt: "Pannel Assignment", src: "/IpShowTools/ShowPannel.png"},
  },
  {
    label: "安全核查",
    link: "safety-check",
    image: {alt: "Safety check", src: "/IpShowTools/ShowSafety.png"},
  },
  {
    label: "集采审核",
    link: "procurement-check",
    image: {alt: "Procurement Check", src: "/IpShowTools/ShowProcurement.png"},
  },
  {
    label: "投资估算",
    link: "investment-review",
    image: {alt: "Investment Review", src: "/IpShowTools/ShowInvestment.png"},
  },
];
export const IpdShellApp = ({children}: {children: React.ReactNode}) => {
  return (
    <Flex style={{height: "calc(100vh - 60px)"}}>
      <Box w={250} visibleFrom="md" style={{flexShrink: 0}}>
        <ScrollArea style={{height: "100%"}}>
          <WideIpdSideMenu menuTop={menuTop} menuTools={menuTools} menuBottom={menuBottom} />
        </ScrollArea>
      </Box>
      <Box w={75} hiddenFrom="md" style={{flexShrink: 0}}>
        <ScrollArea style={{height: "calc(100vh - 60px)", overflowY: "auto"}}>
          <NarrowIpdSideMenu menuTop={menuTop} menuTools={menuTools} menuBottom={menuBottom} />
        </ScrollArea>
      </Box>
      <Box style={{flexGrow: 1, overflow: "auto"}}>{children}</Box>
    </Flex>
  );
};
